<template>
  <view class="genealogicalJournal flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack title="家庭日志" is-fixed :background="'#FFFFFF'"
                  @getPageHeight="getPageHeight">
      <template>
        <view class="genealogicalJournal_headerTitle">
          <text class="genealogicalJournal_headerTitle_text">
            {{ page.genealogicalName }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <scroll-view :scroll-y="true" @scrolltolower="genealogicalJournalScrolltolower" :style="{
      height:`calc(100vh - ${page.headerHeight}px)`
    }">
      <view class="journalList flex flex-column align-center" v-for="(item,index) in page.genealogicalJournalList"
            :key="index">
        <view class="hW_20"></view>
        <view class="time flex align-center justify-center">
          {{ dayjs(item.add_time).format('YYYY年MM月DD日 HH:mm:ss') }}
        </view>
        <view class="list flex align-center">
          <image :src="`${IMG_URL}/index/message_icon.png`"></image>
          <text class="content ml_12" style="width: 630rpx;">
            {{ item.content.username }}{{ item.content.type }}{{ item.content.text }}
          </text>
        </view>
      </view>
      <view class="hW_100"
            v-if="page.genealogicalJournalParam.page * page.genealogicalJournalParam.pagesize >= page.genealogicalJournalParam.total">
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import { computed, reactive } from 'vue';
  import dayjs from 'dayjs';
  import sheep from '@/sheep';
  import { onLoad, onShow } from '@dcloudio/uni-app';

  const page = reactive({
    headerHeight: 0,
    genealogicalName: '',
    genealogicalJournalList: [],
    genealogicalJournalParam: {
      page: 1,
      pagesize: 15,
      genealogy_id: '',
      total: 0,
    },
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  onLoad(() => {
    page.genealogicalName = JSON.parse(uni.getStorageSync('genealogicalJournalName')).name;
    page.genealogicalJournalParam.genealogy_id = JSON.parse(uni.getStorageSync('genealogicalJournalName')).id;
    uni.removeStorageSync('genealogicalJournalName');
  });

  onShow(async () => {
    await clearJournalList();
    await getFamilyJournalList();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function clearJournalList() {
    page.genealogicalJournalList = [];
    page.genealogicalJournalParam.page = 1;
    page.genealogicalJournalParam.total = 0;
  }

  // 获取家庭日志列表
  async function getFamilyJournalList() {
    let { data } = await sheep.$api.genealogy.getGenealogyLog(page.genealogicalJournalParam);
    page.genealogicalJournalParam.total = data.total;
    data.data.forEach(item => {
      page.genealogicalJournalList.push(item);
    });
  }

  // 获取更多日志列表
  async function genealogicalJournalScrolltolower() {
    if (page.genealogicalJournalParam.page * page.genealogicalJournalParam.pagesize < page.genealogicalJournalParam.total) {
      page.genealogicalJournalParam.page = page.genealogicalJournalParam.page + 1;
      await getFamilyJournalList();
    }
  }
</script>


<style scoped lang="scss">
  .genealogicalJournal {
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;

    .genealogicalJournal_headerTitle {
      position: absolute;
      bottom: -26rpx;
      left: 50%;
      transform: translateX(-50%);

      .genealogicalJournal_headerTitle_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #A0A0A0;
      }
    }
  }

  .journalList {
    width: 750rpx;
    .time {
      width: 702rpx;
      padding: 10rpx 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #A0A0A0;
    }

    .list {
      padding: 20rpx 15rpx;
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
      overflow: hidden;

      image {
        width: 45rpx;
        height: 38rpx;
      }

      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #696969;
      }
    }
  }
</style>
